<template>
	<div class="update">
		<div class="sidebar">
			<!-- <img :src="`http://127.0.0.1/api/public/showimg/${this.$store.state.pic}`" /> -->
			<div class="my">
				<h3>
					<i class="el-icon-user"></i>
					我的现代
				</h3>
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<el-row class="tac">
				<el-col :span="12" style="height: 100%; width: 100%;">
					<el-menu default-active="2" class="el-menu-vertical-demo">
						<router-link to="/pc/update/updateuser">
							<el-menu-item index="1">
								<span slot="title">
									修改个人信息
								</span>
							</el-menu-item>
						</router-link>
						<router-link to="/pc/update/updatepwd">
							<el-menu-item index="2">
								<span slot="title">
									修改密码
								</span>
							</el-menu-item>
						</router-link>
						<router-link to="/pc/update/updatepic">
							<el-menu-item index="3">
								<span slot="title">
									修改头像
								</span>
							</el-menu-item>
						</router-link>
						<router-link to="">
							<el-menu-item index="4">
								<span slot="title">
									我的评论
								</span>
							</el-menu-item>
						</router-link>
					</el-menu>
				</el-col>
			</el-row>
		</div>
		<div class="options">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.update {
		width: 100%;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.update .sidebar {
		width: 10%;
		height: 100%;
	}

	.update .sidebar .my {
		width: 100%;
		height: 100px;
		position: relative;
	}

	.update .sidebar .my h3 {
		width: 100%;
		height: 93px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		border: 1px solid #e1e1e1;
		background-color: #f8f8f8;
	}

	.update .sidebar .my .left {
		position: absolute;
		bottom: 0;
		left: -0.6px;
		border-bottom: 3px solid transparent;
		border-left: 3px solid transparent;
		border-top: 3px solid #e1e1e1;
		border-right: 3px solid #e1e1e1;
	}

	.update .sidebar .my .right {
		position: absolute;
		bottom: 0;
		right: -2.2px;
		border-bottom: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 3px solid #e1e1e1;
		border-left: 3px solid #e1e1e1;
	}

	.update .sidebar .tac {
		width: 95%;
		height: 100%;
		margin-left: 5px;
		border: 1px solid #e1e1e1;
	}

	.update .sidebar .tac .el-menu-vertical-demo {
		height: 100%;
	}

	.update .sidebar .tac .el-menu-vertical-demo a {
		color: black;
	}

	.update .sidebar .tac .el-menu-vertical-demo a:hover {
		color: aquamarine;
	}

	.update .options {
		width: 70%;
		height: 100%;
	}
</style>